<template>
  <el-card class="box-card exam-answer webheart">
    <div class="exam-quick">
      <el-tabs type="card">
        <el-tab-pane
          v-for="v in testPaperChapterList"
          :key="v.id"
          :label="v.name"
        >
          <ul class="num">
            <li
              :class="showClass(item.id)"
              v-for="(item, idx) in v.testSubjects"
              :key="item.id"
              @click="handleAnchor('#anchor' + item.id)"
              :href="'anchor' + item.id"
            >
              <a href="javascript:;"> {{ ++idx }} </a>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="exam-submit">
      <el-button
        v-if="isShowAnswer"
        type="primary"
        @click="() => this.$emit('closeDialog')"
        >关 闭</el-button
      >
      <el-button v-else type="primary" @click="handleSubmit()">提 交</el-button>
    </div>
    <div style="clear: both"></div>
  </el-card>
</template>
<script>
export default {
  computed: {
    showClass() {
      return (id) => {
        if (this.row.hasOwnProperty('testPaperAnswerVOList')) {
          let curAnswer = this.row.testPaperAnswerVOList.filter(
            (v) => v.id == id,
          )[0]
          if (!curAnswer) return 'color-danger'
          return curAnswer.isRight == 'Y' ? 'color-success' : 'color-danger'
        } else {
          // console.log(this.answerCard.filter((v) => v.id == id))
          return this.answerCard.filter((v) => v.id == id).length != 0
            ? 'choose'
            : ''
        }
      }
    },
    isShowAnswer() {
      return this.row.hasOwnProperty('testPaperAnswerVOList')
    },
  },
  props: ['row', 'answerCard', 'testPaperChapterList'],
  methods: {
    //确认交卷
    handleSubmit() {
      let list = this.row.testExercisesList
      let total = list.reduce((t, v) => {
        return (t += v.testSubjects.length)
      }, 0)
      const h = this.$createElement
      this.$msgbox({
        title: '提交练习',
        message: h('p', null, [
          h('span', null, '本练习共 '),
          h('b', { style: 'color: red' }, total),
          h('span', null, ' 道题，已答 '),
          h('b', { style: 'color: red' }, this.answerCard.length),
          h('span', null, ' 题，确定要提交吗？'),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.submitTest()
            done()
          } else {
            done()
          }
        },
      })
        .then(() => {})
        .catch(() => {})
    },
    //交卷
    async submitTest() {
      let answeredIds = this.answerCard.map((v) => v.id)
      let unAnswerArr = []
      this.answerCard.forEach((item) => {
        this.$set(item, 'score', 0)
      })
      this.row.testExercisesList.forEach((item) => {
        item.testSubjects.forEach((v) => {
          if (answeredIds.indexOf(v.id) == -1) {
            unAnswerArr.push({
              answer: v.type == 2 || v.type == 4 ? [] : '',
              id: v.id,
              score: 0,
              subjectsType: v.type,
            })
          }
        })
      })
      let obj = {
        id: this.row.id,
        testPaperAnswerVOList: [...this.answerCard, ...unAnswerArr],
      }
      await this.$store.dispatch('submitPaperTestExercisesHis', obj)
      this.$emit('closeDialog')
      this.$bus.$emit('refreshRegularExerciseList')
      // this.successMsg('试卷已提交成功')
      // setTimeout(() => {
      //   window.close();
      // }, 1500);
    },
    handleAnchor(selector) {
      document.querySelector(selector).scrollIntoView({
        behavior: 'smooth',
      })
    },
  },
}
</script>
<style scoped lang="scss">
.exam-answer {
  position: absolute;
  bottom: 0;
  .exam-quick {
    float: left;
    padding: 0 5px;
    width: calc(100% - 100px);
    height: 100px;
    border-bottom: 1px solid #f5f5f5;
    box-sizing: border-box;
    .num {
      li {
        float: left;
        margin: 5px;
        border-radius: 4px;
        border: 1px solid #eee;
        background: #f8f8f8;
        line-height: 22px;
        a {
          padding: 0 6px;
          display: block;
          color: #333;
        }
        &.choose,
        &:hover {
          background: var(--colorH1);
          border-color: var(--colorH1);
          a {
            color: #fff;
          }
        }
        &.color-danger {
          background: #f56c6c;
        }
        &.color-success {
          background: #67c23a;
        }
        &.color-danger,
        &.color-success {
          a {
            color: #fff;
          }
        }
        &.color-danger:hover,
        &.color-success:hover {
          border-color: transparent;
        }
      }
    }
  }
  .exam-submit {
    float: right;
    width: 100px;
    height: 100px;
    text-align: center;
    background: #f5f5f5;
    box-sizing: border-box;
    button {
      margin-top: 30px;
    }
  }
}
</style>